<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>打印</title>
    <link rel="stylesheet" type="text/css" href="print.css" />
    <style type="text/css">
        /*@import url("print.css") print;*/
        @media print{
            body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
            body, button, input, select, textarea { font:12px/1.5  arial,"黑体", \5b8b\4f53; }
            h1, h2, h3, h4, h5, h6{ font-size:100%; }
            address, cite, dfn, em, var { font-style:normal; }
            code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
            small{ font-size:12px; }
            ul, ol { list-style:none; }
            a { text-decoration:none; }
            a:hover { text-decoration:underline; }
            sup { vertical-align:text-top; }
            sub{ vertical-align:text-bottom; }
            legend { color:#000; }
            fieldset, img { border:0; }
            button, input, select, textarea { font-size:100%; }
            table { border-collapse:collapse; border-spacing:0; }

            .no-print{
                display:none;
            }
            /*@page{*/
            /*size: 100mm 150mm;*/
            /*margin: 1.75mm;*/
            /*}*/

            #printPage {
                width: 96px;
                height: 146mm;
                position: relative;
                border: 1px dotted #000000;
                box-sizing: border-box;
            }

            #printPage span{
                margin-left: 2mm;
            }

            .left {
                border-left: 1px dotted #000000;
                border-right: 1px dotted #000000;
                border-bottom: 1px dotted #000000;
                left: 0;
            }

            .right {
                border-right: 1px dotted #000000;
                border-bottom: 1px dotted #000000;
                /*right: 0;*/
            }

            .deviation{
                margin-left: 2mm;
            }

            #emsType{
                width: 40mm;
                height: 14mm;
                position: absolute;
                top: 0;
                padding-top: 6mm;
                font-size: 20px;
                border-top: 1px dotted #000000;
            }

            #barcode{
                width: 56mm;
                height: 20mm;
                position: absolute;
                top: 0;
                left: 40mm;
                border-top: 1px dotted #000000;
            }

            #sender{
                width: 46mm;
                height: 15mm;
                font-size: 12px;
                position: absolute;
                top: 20mm;
            }

            #area{
                width: 50mm;
                height: 15mm;
                position: absolute;
                top: 20mm;
                left: 46mm;
            }

            #recipient{
                width: 96mm;
                height: 17mm;
                position: absolute;
                left: 0;
                top: 35mm;
                font-size: 12px;
            }

            #pay{
                width: 40mm;
                height: 14mm;
                position: absolute;
                top: 52mm;
                font-size: 12px;
            }

            #delivers{
                width: 56mm;
                height: 14mm;
                position: absolute;
                top: 52mm;
                left: 40mm;
                font-size: 12px;
            }

            #order{
                width: 96mm;
                height: 20mm;
                position: absolute;
                left: 0;
                top: 66mm;
                font-size: 12px;

            }

            #divide{
                width: 96mm;
                height: 4mm;
                position: absolute;
                left: 0;
                top: 86mm;
            }

            #number{
                width: 96mm;
                height: 24mm;
                position: absolute;
                left: 0;
                top: 90mm;
                font-size: 12px;
            }

            #send{
                width: 47mm;
                height: 30mm;
                position: absolute;
                top: 114mm;
                font-size: 12px;
            }

            #pickup{
                width: 49mm;
                height: 30mm;
                position: absolute;
                top: 114mm;
                left: 47mm;
                font-size: 12px;
            }

            #remark{
                width: 68mm;
                height: 17mm;
                position: absolute;
                top: 144mm;
                font-size: 12px;
            }

            #net{
                width: 68mm;
                height: 7mm;
                position: absolute;
                top: 161mm;
                font-size: 12px;
            }

            #QRCode{
                width: 28mm;
                height: 24mm;
                position: absolute;
                top: 144mm;
                left: 68mm;
            }

            #note{
                font-size: 6px;
            }
            .deviation img{
                margin-top: -5mm;
            }
        }

        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
        body, button, input, select, textarea { font:12px/1.5  arial,"黑体", \5b8b\4f53; }
        h1, h2, h3, h4, h5, h6{ font-size:100%; }
        address, cite, dfn, em, var { font-style:normal; }
        code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
        small{ font-size:12px; }
        ul, ol { list-style:none; }
        a { text-decoration:none; }
        a:hover { text-decoration:underline; }
        sup { vertical-align:text-top; }
        sub{ vertical-align:text-bottom; }
        legend { color:#000; }
        fieldset, img { border:0; }
        button, input, select, textarea { font-size:100%; }
        table { border-collapse:collapse; border-spacing:0; }

        .no-print{
            /*display:none;*/
        }
        /*@page{*/
        /*size: 100mm 150mm;*/
        /*margin: 1.75mm;*/
        /*}*/

        #printPage {
            width: 96px;
            height: 146mm;
            position: relative;
            /*border: 1px dotted #000000;*/
            box-sizing: border-box;
        }

        #printPage span{
            margin-left: 2mm;
        }

        .left {
            border-left: 1px dotted #000000;
            border-right: 1px dotted #000000;
            border-bottom: 1px dotted #000000;
            left: 0;
        }

        .right {
            border-right: 1px dotted #000000;
            border-bottom: 1px dotted #000000;
            /*right: 0;*/
        }

        .deviation{
            margin-left: 2mm;
        }

        #emsType{
            width: 40mm;
            height: 14mm;
            position: absolute;
            top: 0;
            padding-top: 6mm;
            font-size: 20px;
            border-top: 1px dotted #000000;
        }

        #barcode{
            width: 56mm;
            height: 20mm;
            position: absolute;
            top: 0;
            left: 40mm;
            border-top: 1px dotted #000000;
        }

        #sender{
            width: 46mm;
            height: 15mm;
            font-size: 12px;
            position: absolute;
            top: 20mm;
        }

        #area{
            width: 50mm;
            height: 15mm;
            position: absolute;
            top: 20mm;
            left: 46mm;
        }

        #recipient{
            width: 96mm;
            height: 17mm;
            position: absolute;
            left: 0;
            top: 35mm;
            font-size: 12px;
        }

        #pay{
            width: 40mm;
            height: 14mm;
            position: absolute;
            top: 52mm;
            font-size: 12px;
        }

        #delivers{
            width: 56mm;
            height: 14mm;
            position: absolute;
            top: 52mm;
            left: 40mm;
            font-size: 12px;
        }

        #order{
            width: 96mm;
            height: 20mm;
            position: absolute;
            left: 0;
            top: 66mm;
            font-size: 12px;

        }

        #divide{
            width: 96mm;
            height: 4mm;
            position: absolute;
            left: 0;
            top: 86mm;
        }

        #number{
            width: 96mm;
            height: 24mm;
            position: absolute;
            left: 0;
            top: 90mm;
            font-size: 12px;
        }

        #send{
            width: 47mm;
            height: 30mm;
            position: absolute;
            top: 114mm;
            font-size: 12px;
        }

        #pickup{
            width: 49mm;
            height: 30mm;
            position: absolute;
            top: 114mm;
            left: 47mm;
            font-size: 12px;
        }

        #remark{
            width: 68mm;
            height: 17mm;
            position: absolute;
            top: 144mm;
            font-size: 12px;
        }

        #net{
            width: 68mm;
            height: 7mm;
            position: absolute;
            top: 161mm;
            font-size: 12px;
        }

        #QRCode{
            width: 28mm;
            height: 24mm;
            position: absolute;
            top: 144mm;
            left: 68mm;
        }

        #note{
            font-size: 6px;
        }
        .deviation img{
            margin-top: -5mm;
        }
    </style>

    <script language="javascript">
        function remove_ie_header_and_footer() {
            let HKEY_Root, HKEY_Path, HKEY_Key;
            HKEY_Root = "HKEY_CURRENT_USER";
            HKEY_Path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
            try {
                let RegWsh = new ActiveXObject("WScript.Shell");
                HKEY_Key = "header";
                RegWsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");
                HKEY_Key = "footer";
                RegWsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");
            }
            catch (e) {}
        }
        function printPage(printpage)
        {
            if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
                remove_ie_header_and_footer();
            }
            let newstr = printpage.innerHTML;
            let oldstr = document.body.innerHTML;
            document.body.innerHTML =newstr;
            window.print();
            document.body.innerHTML=oldstr;
            return false;
        }
        window.onload = function()
        {
            let bt=document.getElementById("bt");
            let page=document.getElementById("printPage");
            bt.onclick=function()
            {
                printPage(page);
            }
        }
    </script>
    <script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
    <script src="/js/JsBarcode.all.min.js"></script>
</head>
<body >
<!--startPrint-->
<div id="printPage" >
    <div id="emsType" class="left">
        <span class="deviation"><img src="

"></span>
    </div>

    <div id="barcode" class="right">
        <span  class="deviation"> </span>
        <span><img id="imgcode" width="140px" height="70px"/></span>
    </div>

    <div id="sender" class="left">
        <span class="deviation">品名/Product Name：</span>
        <span>{$list.article}</span>
    </div>

    <div id="area" class="right">
        <span class="deviation">发货单位： {$list.haircompany}</span>
    </div>

    <div id="recipient" class="left">
        <span class="deviation">收件/TO：</span>
        <span class="deviation">{$list.collectname}&nbsp&nbsp&nbsp<br/>&nbsp&nbsp手机(Ph):{$list.collectphone}</span><br/>
        <span class="deviation">地址/Address：{$list.collectaddress}</span>
    </div>

    <div id="pay" class="left">
        {if condition="$list.pay ==1"}
        <span class="deviation">付款方式：寄付</span>
        {/if}
        {if condition="$list.pay ==2"}
        <span class="deviation">付款方式：到付</span>
        {/if}
        <span></span>
        <br/>
        <span class="deviation">计费重量/weight：{$list.weight}&nbspKG</span>
        <span></span>
        <br/>
        <span class="deviation">保价金额/ks：{$list.insuredprice}&nbsp$</span>
        <span></span>
        <br/>
    </div>

    <div id="delivers" class="right">
        <span class="deviation">收件人\代收人：</span>
        <span></span>
        <br/>
        <br/>
        <span class="deviation">签收/sign：</span>
        <span></span>
        <span>年/Y</span>
        <span></span>
        <span>月/M</span>
        <span></span>
        <span>日/D</span>

        <br/>
        <br/>
        <span id="note"><br/>快件送达收货人地址，经收件人或收件人允许的代收人签字，视为送达</span>
    </div>

    <div id="order" class="left">
        <span class="deviation">订单号/NO：{$list.oddnumbers}</span>
        <span></span>
        <span class="deviation">件数/number：{$list.number}</span>
        <span></span>
        <span class="deviation"><br/>重量/weight：{$list.weight}&nbspKG</span>
        <span></span>
        <span></span>
    </div>

    <div id="divide" class="left">
    </div>

    <div id="number" class="left right">
        <span class="deviation">&nbsp</span>
        <span><img id="imgscode" width="330px" height="90px"/></span>
    </div>

    <div id="send" class="left right">
        <span class="deviation">寄件/From：</span><br/>
        <span>姓名/Name：{$list.hairname}<br/>&nbsp&nbsp手机号/Ph：{$list.hairphone}<br/>&nbsp&nbsp地址/Address：{$list.hairaddress}</span>
    </div>

    <div id="pickup" class="right">
        <span class="deviation">收件/TO：</span><br/>
        <span>姓名/Name：{$list.collectname}<br/>&nbsp&nbsp手机号/Ph：{$list.collectphone}<br/>&nbsp&nbsp地址/Address：{$list.collectaddress}</span>
    </div>

    <div id="remark" class="left">
        <span class="deviation">备注/note：</span>
        <span></span>
    </div>

    <div id="net" class="left">
        <span class="deviation">客服电话：18387555036 / 0095959350002</span>
    </div>

    <div id="QRCode" class="right">
        <span class="deviation"><br/><img  src="

" width="110px" height="70px"></span>
    </div>
</div>
<!--endPrint-->
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="width: 364px;display: flex;justify-content: center;">
<input name="print" class=" no-print" type="button" id="bt" value="点击打印" style="background-color: #0D9BF2;width:120px;color: white;border: none;box-shadow: -1px -2px -2px 0 #615959;border-radius: 3px;font-size: 23px;"/>
</div>

</body>
<script>
    //imgscode
    $("#imgscode").JsBarcode("{$list.oddnumbers}");
    $("#imgcode").JsBarcode("{$list.oddnumbers}");//or JsBarcode("#imgcode", "I'm huangenai!");
    //alert(123123);
</script>
</html>